<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./../../resources/templates/template.xhtml">

    <ui:define name="header">
        <!-- Script que usa o click dos botoes de proximo e anterior para navegar no wizard -->
        <script type="text/javascript">
            $('document').ready(function(){
                
            });
        </script>
    </ui:define>

    <ui:define name="content">
        <h:form id="frmNovo">

            <!-- Exibicao de mensagens globais -->
            <p:growl id="gMessages" sticky="false" globalOnly="true" />

            <!-- Wizard -->

            <p:wizard nextLabel="Próximo"
                      backLabel="Anterior"
                      widgetVar="wiz"
                      flowListener="#{novoEventoBean.onFlow}">
                <p:tab id="tabDadosEvento" title="Evento">
                    <p:panel header="Dados do evento">
                        <p:messages id="mMessagesEditar"
                                    closable="true" 
                                    redisplay="true"/>
                        <p:panelGrid id="pgEditarEvento" 
                                     columns="1" 
                                     styleClass="gridNoLine">
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="*Nome:" /><br/>
                                <p:inputText id="itNomeEvento"
                                             value="#{novoEventoBean.evento.nmeEvento}"
                                             required="true"
                                             requiredMessage="Digite o nome do evento."
                                             maxlength="80"/>
                            </p:panelGrid>
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="*Tipo de evento:" /><br/>
                                <p:selectOneMenu value="#{novoEventoBean.evento.tdTipoEvento}"
                                                 required="true"
                                                 requiredMessage="Selecione o tipo de evento."
                                                 effect="fade">
                                    <f:converter converterId="tipoEventoConversor"/>
                                    <f:selectItem itemLabel="Selecione um item..."
                                                  itemValue="" />
                                    <f:selectItems value="#{novoEventoBean.tiposEvento}" 
                                                   var="tipo"
                                                   itemLabel="#{tipo.nmeTipoEvento}" 
                                                   itemValue="#{tipo}" />
                                </p:selectOneMenu>
                            </p:panelGrid>
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="*Públicos:" /><br/>
                                <p:selectCheckboxMenu value="#{novoEventoBean.publicos}" 
                                                      label="Público-alvo:"
                                                      required="true"
                                                      requiredMessage="Selecione o tipo de público do evento.">
                                    <f:converter converterId="publicoConversor" />
                                    <f:selectItems value="#{novoEventoBean.listaPublicos}" />
                                </p:selectCheckboxMenu>
                            </p:panelGrid>
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="Descrição:" /><br/>
                                <p:inputTextarea value="#{novoEventoBean.evento.dscEvento}"
                                                 maxlength="250"/>
                            </p:panelGrid>
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="*Data de início:" /><br/>
                                <p:calendar id="calDataInicioEvento" 
                                            value="#{novoEventoBean.evento.dtaInicioEvento}" 
                                            showOn="button"
                                            navigator="true"
                                            locale="pt" 
                                            pattern="dd/MM/yyyy HH:mm"
                                            stepMinute="10"
                                            label="Data de início:"
                                            maxdate="#{novoEventoBean.evento.dtaTerminoEvento}"
                                            required="true"
                                            requiredMessage="Selecione a data de início do evento.">
                                    <p:ajax event="dateSelect"
                                            update=":frmNovo:calDataTerminoEvento :frmNovo:gMessages" /> 
                                </p:calendar>
                            </p:panelGrid> 
                            <p:panelGrid columns="2" styleClass="gridNoLine">
                                <h:outputLabel value="*Data de término:" /><br/>
                                <p:calendar id="calDataTerminoEvento" 
                                            value="#{novoEventoBean.evento.dtaTerminoEvento}" 
                                            showOn="button"
                                            navigator="true"
                                            locale="pt" 
                                            pattern="dd/MM/yyyy HH:mm"
                                            stepMinute="10"
                                            label="Data de término:"
                                            mindate="#{novoEventoBean.evento.dtaInicioEvento}"
                                            required="true"
                                            requiredMessage="Selecione a data de término do evento.">
                                    <p:ajax event="dateSelect"
                                            update=":frmNovo:calDataInicioEvento :frmNovo:gMessages" /> 
                                </p:calendar>
                            </p:panelGrid>
                        </p:panelGrid>
                    </p:panel>
                    <!-- <p:commandButton type="button"
                                     styleClass="nextButton"
                                     icon="ui-icon-circle-triangle-e"
                                     iconPos="left"
                                     value="Próxima"/> -->
                </p:tab>
                <p:tab id="tabRecursosEvento" title="Recursos">
                    <p:messages id="mRecursos" redisplay="false" closable="true" />
                    <p:panel>
                        <p:dataTable id="dtRecursosDisponiveis" 
                                     value="#{novoEventoBean.recursosDisponiveis}"
                                     var="recurso"
                                     paginator="true" 
                                     rows="5" 
                                     rowsPerPageTemplate="5"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                            <f:facet name="header">
                                Recursos Disponíveis
                            </f:facet>
                            <p:column>
                                <f:facet name="header">
                                    Recurso
                                </f:facet>
                                <p:outputLabel value="#{recurso.dscRecurso}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    Tipo de recurso
                                </f:facet>
                                <p:outputLabel value="#{recurso.tdTipoRecurso.nmeTipoRecurso}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    Quantidade
                                </f:facet>
                                <p:spinner value="#{novoEventoBean.quantidadeRecursoAdicionado}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">Adicionar</f:facet>
                                <p:commandButton value="Adicionar" 
                                                 icon="ui-icon-circle-plus" 
                                                 iconPos="left"
                                                 action="#{novoEventoBean.onAddRecurso(recurso)}"
                                                 update=":frmNovo:dtRecursosDisponiveis :frmNovo:dtRecursosAlocados" />
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                    <p:panel>
                        <p:dataTable id="dtRecursosAlocados" 
                                     value="#{novoEventoBean.recursosAlocados}" 
                                     var="recurso"
                                     paginator="true" 
                                     rows="5" 
                                     rowsPerPageTemplate="5"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                            <f:facet name="header">
                                Recursos Solicitados
                            </f:facet>
                            <p:column>
                                <f:facet name="header">
                                    Tipo de recurso
                                </f:facet>
                                <p:outputLabel value="#{recurso.tdTipoRecurso.nmeTipoRecurso}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">Excluir</f:facet>
                                <p:commandButton value="Excluir" 
                                                 icon="ui-icon-circle-close"
                                                 iconPos="left"
                                                 update=":frmNovo:dtRecursosDisponiveis :frmNovo:dtRecursosAlocados"
                                                 action="#{novoEventoBean.onDelRecurso(recurso)}" />
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                </p:tab>
                <p:tab id="tabServicosEvento" title="Serviços">
                    <p:messages id="mServicos" 
                                redisplay="false" 
                                closable="true" />
                    <p:panel>
                        <p:dataTable id="dtServicosDisponiveis" 
                                     value="#{novoEventoBean.servicosDisponiveis}"
                                     var="servico"
                                     paginator="true" 
                                     rows="5" 
                                     rowsPerPageTemplate="5"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                            <f:facet name="header">
                                Serviços Disponíveis
                            </f:facet>
                            <p:column>
                                <f:facet name="header">
                                    Serviço
                                </f:facet>
                                <p:outputLabel value="#{servico.nmeServico}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    Descrição
                                </f:facet>
                                <p:outputLabel value="#{servico.dscServico}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">Adicionar</f:facet>
                                <p:commandButton value="Adicionar" 
                                                 icon="ui-icon-circle-plus" 
                                                 iconPos="left"
                                                 action="#{novoEventoBean.onAddServico(servico)}"
                                                 update=":frmNovo:dtServicosDisponiveis :frmNovo:dtServicosAlocados" />
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                    <p:panel>
                        <p:dataTable id="dtServicosAlocados" 
                                     value="#{novoEventoBean.servicosAlocados}" 
                                     var="servico"
                                     paginator="true" 
                                     rows="5" 
                                     rowsPerPageTemplate="5"
                                     paginatorPosition="bottom"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                            <f:facet name="header">
                                Recursos Solicitados
                            </f:facet>
                            <p:column>
                                <f:facet name="header">
                                    Serviço
                                </f:facet>
                                <p:outputLabel value="#{servico.nmeServico}" />
                            </p:column>
                            <p:column>
                                <f:facet name="header">Excluir</f:facet>
                                <p:commandButton value="Excluir" 
                                                 icon="ui-icon-circle-close"
                                                 iconPos="left"
                                                 update=":frmNovo:dtServicosDisponiveis :frmNovo:dtServicosAlocados"
                                                 action="#{novoEventoBean.onDelServico(servico)}" />
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                </p:tab>
                <p:tab id="tabResumo" title="Confirmar">
                    <p:commandButton type="button"
                                     styleClass="backButton"
                                     icon="ui-icon-circle-triangle-w"
                                     iconPos="left"
                                     value="Anterior"/>
                    <p:commandButton value="Salvar"
                                     actionListener="#{novoEventoBean.cadastrar}"
                                     oncomplete="handleAction(xhr, status, args);"
                                     process="@form"
                                     update=":frmNovo:mMessagesEditar :frmNovo:gMessages"/>
                </p:tab>
            </p:wizard>
        </h:form>
    </ui:define>

</ui:composition>
